<template>
  <div class="box" @mouseenter="mouseenter" @mouseleave="mouseleave">
    <main class="main-box">
      <div  ref="contentRef">
        <slot></slot>
      </div>
      <div v-html="copyContentRef"></div>
    </main>
  </div>
</template>

<script setup lang="ts" name="app-seamless-scroll">
import { onMounted, ref, shallowRef} from "vue";
import { useRafFn } from '@vueuse/core';
import { useIntervalFn } from '@vueuse/core'

const props = defineProps({
  width:{
    type:String,
    default: () => '300px'
  },
  height:{
    type:String,
    default: () => '200px'
  },
  single:{
    type:Boolean,
    default: () => false
  }
})

const top = shallowRef(10)
const contentRef = ref<HTMLHtmlElement>()
const copyContentRef = ref('')


let contentHeight = 0
let contentChildrenLength = 0
onMounted(() => {
  contentHeight = contentRef.value.offsetHeight
  contentChildrenLength = contentRef.value.children.length
  copyContentRef.value = contentRef.value.innerHTML;
})

const { pause, resume } = useRafFn(() => {
  if (top.value >= contentHeight){
    top.value = 0
  }else {
    top.value += 0.5
    props.single && top.value % (contentHeight / contentChildrenLength) === 0 && pause()
  }
})

const { pause:stop, resume:run} = useIntervalFn(() => {
   resume()
}, 4000,{immediate:props.single})


const mouseenter = () => {
  pause()
  stop()
}

const mouseleave = () => {
  resume()
  run()
}
</script>

<style scoped lang="less">
.box {
  height: v-bind('props.height');
  width: v-bind('props.width');
  overflow: hidden;
  .main-box{
    transform: translateY(calc(v-bind('top') * -1px));
  }
}
</style>
